<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" style="width: 100%"
      element-loading-text="Loading" border stripe fit highlight-current-row>
      <el-table-column label="业务类型" align="center" width="100px">
        <template slot-scope="scope">
          <b>
            <el-tag> {{ getTypeStr(scope.row.typ) }}</el-tag>
          </b>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="内容摘要" align="center">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="收藏时间" align="center">
        <template slot-scope="scope">
          {{ formatYearMonthDay(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="seeDetail(scope.row.typ, scope.row.relevenceId)">
            查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-top: 20px;" />

    <el-pagination :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageCount"
      layout="total, prev, pager, next, jumper" :total="dataTotal" @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange" />

    <el-dialog title="" width="60%" :visible.sync="detailDialog.visible" top="5vh">
      <chuanyuewenjian-detail v-if="detailDialog.visible17" :id="detailDialog.id17" />
      <gongwenliuzhuan-detail v-if="detailDialog.visible18" :id="detailDialog.id18" />
      <neibufawen-detail v-if="detailDialog.visible23" :id="detailDialog.id23" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="(detailDialog.visible = false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import ChuanyuewenjianDetail from '../../components/details/chuanyuewenjianDetail.vue'
import GongwenliuzhuanDetail from '../../components/details/gongwenliuzhuanDetail.vue'
import NeibufawenDetail from '../../components/details/neibufawenDetail.vue'

import { websock } from '@/websock'

import moment from 'moment'

export default {
  components: {
    ChuanyuewenjianDetail,
    GongwenliuzhuanDetail,
    NeibufawenDetail
  },
  data() {
    return {
      list: null,
      listLoading: false,
      pageIndex: 1,
      pageCount: 10,
      keyword: '',
      dataTotal: 0,
      detailDialog: {
        visible: false,
        visible17: false,
        visible18: false,
        visible23: false,
        id17: null,
        id18: null,
        id23: null
      }
    }
  },
  async created() {
    this.getGongwenShoucangList()
  },
  methods: {
    getGongwenShoucangList() {
      console.log('get gongwen shoucang list')
      websock.gongwenShoucangListWeb({
        pageIndex: this.pageIndex,
        pageCount: this.pageCount
      }).then(data => {
        this.listLoading = false
        this.list = data.list
        this.dataTotal = data.count
      })
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getGongwenShoucangList()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getGongwenShoucangList()
    },
    formatYearMonthDay(src) {
      return moment(src).format('YYYY-MM-DD')
    },
    getTypeStr(typ) {
      if (typ == 17) {
        return '传阅文件'
      }
      if (typ == 18) {
        return '公文流转'
      }
      if (typ == 23) {
        return '内部发文'
      }
      return '其它'
    },
    seeDetail(typ, id) {
      this.detailDialog.visible17 = false
      this.detailDialog.visible18 = false
      this.detailDialog.visible23 = false

      this.detailDialog.visible = true
      this.detailDialog['visible' + typ] = true
      this.detailDialog['id' + typ] = id
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
